import Taro, { Component } from "@tarojs/taro";
import {
  View,
  Swiper,
  SwiperItem,
  Image,
  Text,
  Icon
} from "@tarojs/components";
import { AtButton, AtSearchBar, AtTabBar, AtIcon } from "taro-ui";

import banner1 from "../../assets/images/pexels-photo-322207.jpeg";
import banner2 from "../../assets/images/pexels-photo-994517.jpeg";
import banner3 from "../../assets/images/pexels-photo-250290.jpeg";
import item1 from "../../assets/images/pexels-photo-206558.jpeg";
import item2 from "../../assets/images/pexels-photo-991509.jpeg";
import item3 from "../../assets/images/pexels-photo-1484808.jpeg";
import item4 from "../../assets/images/title-photo-logo-shirt-157646.jpeg";
import item5 from "../../assets/images/pexels-photo-709803.jpeg";
import item6 from "../../assets/images/pexels-photo-189199.jpeg";
import item7 from "../../assets/images/pexels-photo-618551.jpeg";
import item8 from "../../assets/images/pexels-photo-709789.jpeg";

import "./index.scss";

export default class Index extends Component {
  config = {
    navigationBarTitleText: "Drago 商城"
  };

  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className='index'>
        <View className='at-row'>
          <View
            className='at-col at-col-1'
            style='margin-top: 4px; padding-left: 8px'
          >
            <AtIcon value='camera' style='margin-top: -5px' size='24' />
          </View>
          <View className='at-col at-col-11'>
            <AtSearchBar />
          </View>
        </View>

        <Swiper style='margin-top: 16px; height: 200px' indicatorDots>
          <SwiperItem>
            <Image mode='aspectFill' style='width: 100%' src={banner1} />
          </SwiperItem>
          <SwiperItem>
            <Image mode='aspectFill' style='width: 100%' src={banner2} />
          </SwiperItem>
          <SwiperItem>
            <Image mode='aspectFill' style='width: 100%' src={banner3} />
          </SwiperItem>
        </Swiper>
        <View className='at-article__h3 section-heading'>
          <Text className='heading'>商品列表</Text>
          <View style='display: flex; align-items: center;'>
            <Text style='font-size: 14px; margin-right: 12px;'>
              显示1-10条商品
            </Text>
            <AtIcon value='list' style='margin-top: -5px' size='24' />
          </View>
        </View>
        <View style='padding: 0px; margin-bottom: 55px'>
          <View className='at-row'>
            <View className='at-col at-col-6 image-item-col'>
              <View className='item_card'>
                <Image mode='aspectFill' className='image_item' src={item1} />
                <View>
                  <View className='at-article__p product-heading'>短袖T恤</View>
                  <View className='at-row'>
                    <View
                      // style='color: #ff4949'
                      className='at-col at-col-6 at-article__p price'
                    >
                      ￥88.88
                    </View>
                    <View className='at-col at-col-6 at-article__p add-to-cart'>
                      <AtIcon value='shopping-cart' size='18' />
                    </View>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-col at-col-6  image-item-col'>
              <View className='item_card'>
                <Image mode='aspectFill' className='image_item' src={item2} />
                <View>
                  <View className='at-article__p product-heading'>短袖T恤</View>
                  <View className='at-row'>
                    <View className='at-col at-col-6 at-article__p price'>
                      ￥88.88
                    </View>
                    <View className='at-col at-col-6 at-article__p add-to-cart'>
                      <AtIcon value='shopping-cart' size='18' />
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
          <View className='at-row at-row__justify--between'>
            <View className='at-col at-col-6 image-item-col'>
              <View className='item_card'>
                <Image mode='aspectFill' className='image_item' src={item3} />
                <View>
                  <View className='at-article__p product-heading'>短袖T恤</View>
                  <View className='at-row'>
                    <View className='at-col at-col-6 at-article__p price'>
                      ￥88.88
                    </View>
                    <View className='at-col at-col-6 at-article__p add-to-cart'>
                      <AtIcon value='shopping-cart' size='18' />
                    </View>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-col at-col-6 image-item-col'>
              <View className='item_card'>
                <Image mode='aspectFill' className='image_item' src={item4} />
                <View>
                  <View className='at-article__p product-heading'>短袖T恤</View>
                  <View className='at-row'>
                    <View className='at-col at-col-6 at-article__p price'>
                      ￥88.88
                    </View>
                    <View className='at-col at-col-6 at-article__p add-to-cart'>
                      <AtIcon value='shopping-cart' size='18' />
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
          <View className='at-row'>
            <View className='at-col at-col-6 image-item-col'>
              <View className='item_card'>
                <Image mode='aspectFill' className='image_item' src={item5} />
                <View>
                  <View className='at-article__p product-heading'>短袖T恤</View>
                  <View className='at-row'>
                    <View className='at-col at-col-6 at-article__p price'>
                      ￥88.88
                    </View>
                    <View className='at-col at-col-6 at-article__p add-to-cart'>
                      <AtIcon value='shopping-cart' size='18' />
                    </View>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-col at-col-6 image-item-col'>
              <View className='item_card'>
                <Image mode='aspectFill' className='image_item' src={item6} />
                <View>
                  <View className='at-article__p product-heading'>短袖T恤</View>
                  <View className='at-row'>
                    <View className='at-col at-col-6 at-article__p price'>
                      ￥88.88
                    </View>
                    <View className='at-col at-col-6 at-article__p add-to-cart'>
                      <AtIcon value='shopping-cart' size='18' />
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
          <View className='at-row'>
            <View className='at-col at-col-6 image-item-col'>
              <View className='item_card'>
                <Image mode='aspectFill' className='image_item' src={item7} />
                <View>
                  <View className='at-article__p product-heading'>短袖T恤</View>
                  <View className='at-row'>
                    <View className='at-col at-col-6 at-article__p price'>
                      ￥88.88
                    </View>
                    <View className='at-col at-col-6 at-article__p add-to-cart'>
                      <AtIcon value='shopping-cart' size='18' />
                    </View>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-col at-col-6 image-item-col'>
              <View className='item_card'>
                <Image mode='aspectFill' className='image_item' src={item8} />
                <View>
                  <View className='at-article__p product-heading'>短袖T恤</View>
                  <View className='at-row'>
                    <View className='at-col at-col-6 at-article__p price'>
                      ￥88.88
                    </View>
                    <View className='at-col at-col-6 at-article__p add-to-cart'>
                      <AtIcon value='shopping-cart' size='18' />
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
        <AtTabBar
          fixed
          iconSize={20}
          fontSize={12}
          tabList={[
            { title: "首页", iconType: "home" },
            { title: "分类", iconType: "list" },
            {
              title: "购物车",
              iconType: "shopping-cart",
              text: "100",
              max: "99"
            },
            { title: "账户", iconType: "user" }
          ]}
        />
      </View>
    );
  }
}
